<!--
 * @Descripttion:
 * @version:
 * @Author: tanghao1
 * @Date: 2021-02-20 16:14:03
 * @LastEditors: tanghao1
 * @LastEditTime: 2021-03-11 10:49:22
-->
<template>
  <el-dialog
    ref="refDlg"
    :title="detailData && detailData.id? '编辑属性' : '新增属性'"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :hide-func-bar="true"
    :before-close="clearForm"
    width="600px"
    @close="closeDialog"
  >
    <div>
      <el-form ref="form" :model="formData" :rules="formRules" size="mini" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="属性编码" prop="attCode">
              <el-input v-model="formData.attCode" :disabled="!!(detailData && detailData.id)" size="mini" placeholder="请输入属性编码" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="属性名称" prop="attName">
              <el-input v-model="formData.attName" size="mini" placeholder="请输入属性名称" />
            </el-form-item>
          </el-col>
        </el-row></el-form>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button size="mini" type="primary" @click="submitForm">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { saveAttr } from '@/api/shopauxPlat/attrConfig'
export default {
  name: 'PageEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      formData: {
        attCode: '',
        attName: ''
      },
      formRules: {
        attCode: [{
          required: true,
          message: '请输入属性编码',
          trigger: 'blur'
        }],
        attName: [{
          required: true,
          message: '请输入属性名称',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    const d = this.detailData
    if (d && d.id) {
      this.formData = {
        attCode: d.attCode || '',
        attName: d.attName || ''
      }
    }
  },
  methods: {
    closeDialog() {
      this.dialogShow = false
    },
    clearForm() {
      this.formData = {
        attCode: '',
        attName: ''
      }
    },
    // 提交表单处理
    submitForm() {
      if (this.submiting) return
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          const params = {
            ...this.formData
          }
          if (this.detailData && this.detailData.id) {
            params.id = this.detailData.id
          }

          saveAttr(params).then(res => {
            if (res.success === 1) {
              this.$message.success('保存成功')
              this.dialogShow = false
              this.$emit('refreshTable')
            }
          })
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.el-col el-col-11{margin-bottom: 20px;}
 .avatar-uploader .el-upload {
    border: 1px dashed #181717;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
